<template>
  <div class="search">
    <div class="search-contain">
      <sheader></sheader>
    </div>
    <div class="filter-contain">
      <van-dropdown-menu>
        <van-dropdown-item
          :title="location.title"
          ref="location"
        >
          <row-col
            :data="location"
            @close="closeItem"
            :name='`location`'
          ></row-col>
        </van-dropdown-item>
        <van-dropdown-item
          :title="starRatedHotel.title"
          ref="starRatedHotel"
        >
          <row-col
            :data="starRatedHotel"
            @close="closeItem"
            :name='`starRatedHotel`'
          ></row-col>
        </van-dropdown-item>
        <van-dropdown-item
          :title="peopleNum.title"
          ref="peopleNum"
        >
          <row-col
            :data="peopleNum"
            @close="closeItem"
            :name='`peopleNum`'
          ></row-col>
        </van-dropdown-item>
        <van-dropdown-item
          :title="styleFeatures.title"
          ref="styleFeatures"
        >
          <row-col
            :data="styleFeatures"
            @close="closeItem"
            :name='`styleFeatures`'
          ></row-col>
        </van-dropdown-item>
      </van-dropdown-menu>
    </div>
    <div class="list-contain">
      <scroll
        class="recommend-content"
        :data="discList"
        ref="scroll"
      >
        <div>
          <div
            v-if="recommends.length"
            class="slider-wrapper"
          >
            <div class="recommend-list">
              <ul>
                <li
                  v-for="(item,index) in recommends"
                  class="item"
                  :key="index"
                >
                  <div class="icon">
                    <img
                      v-lazy="item.img"
                      alt=""
                      width="120"
                      height="90"
                    >
                  </div>
                  <div class="text">
                    <h2
                      class="title"
                      v-html="item.title"
                    ></h2>
                    <p class="desc">
                      {{item.starRatedHotel}}
                      {{item.location}}</p>
                    <p class="desc">最大会场:{{item.maxArea}}</p>
                    <p class="desc">客房总数:{{item.roomNumber}}</p>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div
          class="loading-container"
          v-show="!recommends.length"
        >
          <loading></loading>
        </div>
      </scroll>
    </div>

  </div>
</template>
<script>
import scroll from 'base/scroll/scroll'
import loading from 'base/loading/loading'
import sheader from 'base/sheader/sheader'
import rowCol from 'base/row-col/row-col'
import { ERR_OK } from 'api/config'
import { getSearchTitle, getDataResult } from 'api/search'

export default {
  components: {
    scroll,
    loading,
    sheader,
    rowCol
  },
  data () {
    return {
      recommends: [],
      discList: [],
      checkLoaded: false,
      StartTitle: {
        location: '',
        styleFeatures: '',
        starRatedHotel: '',
        peopleNum: ''
      },
      styleFeatures: {},
      location: {},
      starRatedHotel: {},
      peopleNum: {}
    }
  },
  created () {
    this._getSearchTitle()
    this._getDataResult()
  },
  methods: {
    closeItem (value, index) {
      this.$refs[index].toggle()
      this[index].title = value
      this._getDataResult()
    },

    _getSearchTitle () {
      getSearchTitle().then(res => {
        if (res.code === ERR_OK) {
          this.styleFeatures = res.titleData.styleFeatures
          this.location = res.titleData.location
          this.starRatedHotel = res.titleData.starRatedHotel
          this.peopleNum = res.titleData.peopleNum

          this.StartTitle.location = res.titleData.location.title
          this.StartTitle.peopleNum = res.titleData.peopleNum.title
          this.StartTitle.starRatedHotel = res.titleData.starRatedHotel.title
          this.StartTitle.styleFeatures = res.titleData.styleFeatures.title
        }
      })
    },
    _getDataResult () {
      let result = {
        'location': this.location.title === this.StartTitle.location || this.location.title === undefined ? '' : this.location.title,
        'styleFeatures': this.styleFeatures.title === this.StartTitle.styleFeatures || this.location.styleFeatures === undefined ? '' : this.styleFeatures.title,
        'starRatedHotel': this.starRatedHotel.title === this.StartTitle.starRatedHotel || this.location.starRatedHotel === undefined ? '' : this.starRatedHotel.title,
        'peopleNum': this.peopleNum.title === this.StartTitle.peopleNum || this.location.peopleNum === undefined ? '' : this.peopleNum.title
      }
      getDataResult(result).then(res => {
        console.log(res)
        if (res.code === ERR_OK) {
          this.recommends = res.recommend
        }
      })
    },
    loadImage () {
      if (!this.checkLoaded) {
        this.$refs.scroll.refresh()
        this.checkLoaded = true
      }
    }
  }

}
</script>
<style lang="stylus" scoped>
@import '~common/stylus/variable';
.search {
  .search-contain {
    height: $tools-height;
  }
  .filter-contain {
  }
  .list-contain {
    position: fixed;
    width: 100%;
    top: 100px;
    bottom: 50px;
    .recommend-content {
      height: 100%;
      overflow: hidden;
      .recommend-list {
        .list-title {
          height: 65px;
          line-height: 65px;
          text-align: center;
          font-size: $font-size-medium;
          color: $color-theme;
        }
        .item {
          display: flex;
          box-sizing: border-box;
          align-items: center;
          padding: 0 20px 20px 20px;
          .icon {
            flex: 0 0 120px;
            width: 120px;
            padding-right: 20px;
          }
          .text {
            display: flex;
            flex-direction: column;
            justify-content: center;
            flex: 1;
            line-height: 20px;
            overflow: hidden;
            font-size: $font-size-medium;
            .title {
              margin-bottom: 10px;
              font-size: $font-size-large;
              color: $color-text;
            }
            .desc {
              color: $color-text-t;
              font-size: $font-size-medium;
            }
          }
        }
      }
      .loading-container {
        position: absolute;
        width: 100%;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
}
</style>
